<script setup lang="ts">
import { onReachBottom } from '@dcloudio/uni-app';
import BottomModal from './components/BottomModal.vue'
import Pingname from './components/Pinname.vue'
import { onMounted, onUnmounted, ref } from 'vue';
const HontData = ref([
    {
        yeardata: "2024.5.14",
        tang1: "#tag1 #tag2",
        tang1_s: "11111111111",
        imageURL: ["/static/images/share-2.png",
            "/static/images/com_icon_message_pressed_3.png",
            "/static/images/thumbs-up.png",
            "/static/images/star.png"
        ],
        tais: "tang1",
        fen_s: "分享",
        title_s: 100,
        title1_s: 50,
        title2_s: 90,
        images: [
            'https://gitcode.net/qq_44112897/images/-/raw/master/comic/8.jpg',
            'https://gitcode.net/qq_44112897/images/-/raw/master/comic/1.jpg',
            'https://gitcode.net/qq_44112897/images/-/raw/master/comic/30.jpg',

        ]

    },
    {
        yeardata: "2024.4.24",
        tang1: "#tag1 #tag2",
        tang1_s: "11111111111",
        imageURL: ["/static/images/share-2.png",
            "/static/images/com_icon_message_pressed_3.png",
            "/static/images/thumbs-up.png",
            "/static/images/star.png"
        ],
        fen_s: "分享",
        title_s: 100,
        title1_s: 50,
        title2_s: 90,
        images: [
            'https://gitcode.net/qq_44112897/images/-/raw/master/comic/8.jpg',
            'https://gitcode.net/qq_44112897/images/-/raw/master/comic/1.jpg',
            'https://gitcode.net/qq_44112897/images/-/raw/master/comic/30.jpg',

        ]

    },
    {
        yeardata: "2024.2.04",
        tang1: "#tag1 #tag2",
        tang1_s: "11111111111",
        imageURL: ["/static/images/share-2.png",
            "/static/images/com_icon_message_pressed_3.png",
            "/static/images/thumbs-up.png",
            "/static/images/star.png"
        ],
        fen_s: "分享",
        title_s: 100,
        title1_s: 50,
        title2_s: 90,
        images: [
            'https://gitcode.net/qq_44112897/images/-/raw/master/comic/8.jpg',
            'https://gitcode.net/qq_44112897/images/-/raw/master/comic/1.jpg',
            'https://gitcode.net/qq_44112897/images/-/raw/master/comic/30.jpg',

        ]

    },
    {
        yeardata: "2024.1.14",
        tang1: "#tag1 #tag2",
        tang1_s: "11111111111",
        imageURL: ["/static/images/share-2.png",
            "/static/images/com_icon_message_pressed_3.png",
            "/static/images/thumbs-up.png",
            "/static/images/star.png"
        ],
        fen_s: "分享",
        title_s: 100,
        title1_s: 50,
        title2_s: 90,
        images: [
            'https://gitcode.net/qq_44112897/images/-/raw/master/comic/8.jpg',
            'https://gitcode.net/qq_44112897/images/-/raw/master/comic/1.jpg',
            'https://gitcode.net/qq_44112897/images/-/raw/master/comic/30.jpg',

        ]

    },
    {
        yeardata: "2024.1.10",
        tang1: "#tag1 #tag2",
        tang1_s: "11111111111",
        imageURL: ["/static/images/share-2.png",
            "/static/images/com_icon_message_pressed_3.png",
            "/static/images/thumbs-up.png",
            "/static/images/star.png"
        ],
        fen_s: "分享",
        title_s: 100,
        title1_s: 50,
        title2_s: 90,
        images: [
            'https://gitcode.net/qq_44112897/images/-/raw/master/comic/8.jpg',
            'https://gitcode.net/qq_44112897/images/-/raw/master/comic/1.jpg',
            'https://gitcode.net/qq_44112897/images/-/raw/master/comic/30.jpg',

        ]

    },
    {
        yeardata: "2024.1.09",
        tang1: "#tag1 #tag2",
        tang1_s: "11111111111",
        imageURL: ["/static/images/share-2.png",
            "/static/images/com_icon_message_pressed_3.png",
            "/static/images/thumbs-up.png",
            "/static/images/star.png"
        ],
        fen_s: "分享",
        title_s: 100,
        title1_s: 50,
        title2_s: 90,
        images: [
            'https://gitcode.net/qq_44112897/images/-/raw/master/comic/8.jpg',
            'https://gitcode.net/qq_44112897/images/-/raw/master/comic/1.jpg',
            'https://gitcode.net/qq_44112897/images/-/raw/master/comic/30.jpg',

        ]

    },
]


)
const Prose = defineProps<{
    name: string,
    url: string,
    ip: string,
}>()

// 返回上一层
const onfun = () => {
    uni.navigateBack()
}
// 底部弹出
const isBottomBoxVisible = ref(true);
const handleClickOutside = (event: TouchEvent) => {
    const query = uni.createSelectorQuery();
    query.select('.bottom-box').boundingClientRect((rects) => {
        const rect = Array.isArray(rects) ? rects[0] : rects;
        if (rect) {
            const { left, right, top, bottom } = rect;
            const touch = event.changedTouches[0];
            if (touch) {
                const { clientX: x, clientY: y } = touch;
                if (x < left! || x > right! || y < top! || y > bottom!) {
                    isBottomBoxVisible.value = false;
                }
            }
        }
    }).exec();
};
onReachBottom(() => {
    console.log("触发底部");
    isBottomBoxVisible.value = true
})
// 更多弹窗
const showModal = ref(false)
// 评论窗口
const showPing = ref(false)

</script>
<template>
    <view class="viewover" scroll-top @touchend="handleClickOutside">
        <view class="viewname">
            <view class="uio">
                <image src="https://gitcode.net/qq_44112897/images/-/raw/master/comic/8.jpg" mode="scaleToFill"
                    class="images" />
            </view>
            <!-- <view class="uio"></view> -->
            <view class="obr"></view>
            <text class="dotai">他已加入30天，发过10条动态</text>
        </view>
        <!-- 分享上标签 -->
        <view class="overs">
            <uni-icons type="back" size="28" color="#F2BB16" class="lef" @tap="onfun"></uni-icons>
            <uni-icons type="redo" class="mif" size="30" color="#F2BB16"></uni-icons>
            <uni-icons type="more-filled" class="rif" size="30" color="#F2BB16"></uni-icons>
        </view>
        <!-- 用户头框 -->
        <view class="hus">
            <!-- <view class="ima"></view> -->
            <image src="https://gitcode.net/qq_44112897/images/-/raw/master/comic/30.jpg" mode="scaleToFill"
                class="ima" />
            <view class="names">
                <text class="topx">用户昵称
                </text>
                <text class="centerx">男 &nbsp;. 30岁 &nbsp;. IP湖北
                </text>
                <text class="bottonx">个人简介XXXXXXXX</text>
            </view>
        </view>
        <!-- 关注设计 -->
        <view class="guanz">
            <view class="guanz1">
                <view>11</view>
                <view>关注</view>
            </view>
            <view class="guanz2">
                <view>22</view>
                <view>被关注</view>
            </view>
        </view>
        <view class="divs">
            <view class="dis-box">
                <text class="it-box">他的动态
                </text>
                <view class="yearover">
                    <text class="year-box">2024年
                    </text>
                    <view v-for="(item, index) in HontData" :key="index">
                        <view class="tall-box">
                            <view class="new-year">{{ item.yeardata }}</view>
                            <view class="tag">
                                <text class="tag1">{{ item.tang1 }}</text>
                                <text class="tag2">{{ item.tang1_s }}</text>
                            </view>

                            <view class="ims">
                                <view v-for="(it, index) in item.images" :key="index">
                                    <image :src="it" mode="scaleToFill" class="ims2" />
                                </view>
                            </view>
                            <view class="fen"></view>
                            <view class="ove">
                                <view class="ove1">
                                    <image :src="item.imageURL[0]" class="ove3" />
                                    <view class="ove4">{{ item.fen_s }}</view>
                                    <image :src="item.imageURL[1]" mode="scaleToFill" class="ove3"
                                        @click="showPing = true" />
                                    <view class="ove4">{{ item.title_s }}</view>
                                    <image :src="item.imageURL[2]" mode="scaleToFill" class="ove3" />
                                    <view class="ove4">{{ item.title1_s }}</view>
                                    <image :src="item.imageURL[3]" mode="scaleToFill" class="ove3" />
                                    <view class="ove4">{{ item.title2_s }}</view>
                                </view>
                                <view class="over">
                                    <image src="/static/images/icon_more-vertical_default.png" mode="scaleToFill"
                                        class="over1" @click="showModal = true" />
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <view class="bottom-box" v-show="isBottomBoxVisible">
            <button class="b1">私信</button>
            <button class="b2">关注</button>
            <image src="/static/images/编组.png" mode="scaleToFill" class="sacs" />
        </view>
    </view>
    <!-- 更多 -->
    <BottomModal :visible="showModal" @update:visible="showModal = $event">
        <!-- 在这里放置你想在模态窗口中显示的内容 -->
        <view class="geng">
            <text class="tops-box">更多</text>
            <view class="mids-box">
                <view class="lefs-box">
                    <image src="/static/images/icon_sixin_default.png" mode="scaleToFill" class="lefs-img" />
                    <text class="lefs-title">私信</text>
                </view>
                <view class="mods-box">
                    <image src="/static/images/icon_buganxingqu_default.png" mode="scaleToFill" class="mods-img" />
                    <text class="mods-title">不能感兴趣</text>
                </view>
                <view class="regs-box"></view>
            </view>
            <view class="bots-box">
                <image src="/static/images/编组.png" mode="scaleToFill" class="bots-box" />
            </view>
        </view>
    </BottomModal>
    <Pingname :visible="showPing" @update:visible="showPing = $event">
    </Pingname>

</template>
<style lang="scss">
.viewover {
    height: 100%;
    width: 100%;
    display: flex;
    flex: 1;
    // overflow: hidden;
    flex-direction: column;
}

@import "./namelist"
</style>